<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流图片展示</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
#box{margin: 0 auto;position: relative;}
.item {box-shadow: 2px 2px 2px #999;position: absolute;}
</style>
</head>
<body>
<div id="box">
    <div class="item"><img src="images/01.jpg"></div>
    <div class="item"><img src="images/02.jpg"></div>
    <div class="item"><img src="images/03.jpg"></div>
    <div class="item"><img src="images/04.jpg"></div>
    <div class="item"><img src="images/05.jpg"></div>
    <div class="item"><img src="images/06.jpg"></div>
    <div class="item"><img src="images/07.jpg"></div>
    <div class="item"><img src="images/08.jpg"></div>
    <div class="item"><img src="images/09.jpg"></div>
    <div class="item"><img src="images/10.jpg"></div>
    <div class="item"><img src="images/11.jpg"></div>
    <div class="item"><img src="images/12.jpg"></div>
    <div class="item"><img src="images/13.jpg"></div>
    <div class="item"><img src="images/14.jpg"></div>
    <div class="item"><img src="images/15.jpg"></div>
    <div class="item"><img src="images/16.jpg"></div>
    <div class="item"><img src="images/17.jpg"></div>
</div>
<script>
    window.onload = function () {
        var items = Array.from (document.querySelectorAll('.item'))
        var box = document.querySelector('#box')
        const gap = 10
        const Width = items[0].offsetWidth
        var cols = Math.floor(window.innerWidth / (Width + gap))
        box.style.width = cols * Width + (cols - 1) * gap + 'px'
        var len = 0
        var arr = []

      waterfall ()
      function waterfall () {
        for(var i = len; i < items.length; i++) {
          if(i < cols ) {
            items[i].style.top = '0px'
            items[i].style.left = i * (Width + gap) + 'px' 
            arr.push(items[i].offsetHeight +gap)
          }else{
              var minHeight = Math.min(...arr)
              let minIndex = arr.indexOf(minHeight)
              items[i].style.top = minHeight + 'px'
              items[i].style.left = minIndex *(Width + gap) +'px'
              arr[minIndex] += items[i].offsetHeight + gap

          }
        }
      }

      var timer = null
        window.onscroll = function () {
          var scrollTop = document.documentElement.scrollTop ||document.body.scrollTop
          let maxHeight = Math.max(...arr)
          console.log(maxHeight)
          if(scrollTop >= maxHeight - window.innerHeight - 12) {
            clearTimeout(timer)
            timer = setTimeout( () => {
              len = items.length
              setTimeout ( () => {
                var josn =[
                  "images/01.jpg",
                  "images/02.jpg",
                  "images/03.jpg",
                  "images/04.jpg",
                  "images/05.jpg",
                  "images/06.jpg",
                  "images/07.jpg",
                  "images/08.jpg",
                  "images/09.jpg",
                  "images/10.jpg",
                  "images/11.jpg",
                  "images/12.jpg",
                  "images/13.jpg",
                  "images/14.jpg",
                  "images/15.jpg",
                  "images/16.jpg",
                  "images/17.jpg"
                ]
                let divs = josn.map(src => {
                 var div = document.createElement('div')
                 div.className = 'item'
                 div.innerHTML = `<img src="${src}">`
                 box.appendChild(div)
                 return div
                })
                
                items = items.concat(divs)

                var n = 0
                divs.forEach(div => {
                  div.querySelector('img').onload = function () {
                    n++
                    if(n === divs.length) {
                      waterfall()
                    }
                  }
                })
              },1000)
            },100)
          } 
        }
        window.onresize = function () {
              var cols1 = Math.floor(window.width / (Width + gap))
              if(cols1 != cols) {
                cols = cols1
                box.style.width = cols * Width +(cols - 1) * gap + 'px'
                arr = []
                len = 0
                waterfall ()
              }
            }
      } 
</script>
</body>
</html>
